<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZLTool 流列表</title>
    <link rel="icon" href="/static/icon.png">
    <link rel="stylesheet" href="/static/base.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/theme-chalk/index.min.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

    <style>
        .table-opt-div {
            text-align: right;
            margin-bottom: 16px;
        }

        .tips {
            font-size: 16px;
            float: left;
        }
    </style>
</head>
<body>
<div id="app">
    <layout>
        <template #menu>
            <top-menu index="streams.html"></top-menu>
        </template>
        <template #main>
            <el-main>
                <div class="table-opt-div">
                    <el-button @click="showAddStream" type="primary">添加一个新流</el-button>
                </div>
                <el-table :data="tableData" style="width: 100%" v-loading="tableLoading">
                    <el-table-column label="#" type="index" width="50"></el-table-column>
                    <el-table-column prop="app" label="名称" width="100"></el-table-column>
                    <el-table-column prop="stream" label="流ID" width="160"></el-table-column>
                    <el-table-column prop="vhost" label="虚拟主机名" width="140"></el-table-column>
                    <el-table-column label="存活时间" width="120" align="center">
                        <template slot-scope="scope">
                            {{ autoDuration(scope.row.aliveSecond) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" width="160">
                        <template slot-scope="scope">
                        {{ unix2Date(scope.row.createStamp) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="originUrl" label="原始流"></el-table-column>
                    <el-table-column label="操作" width="120" header-align="center" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="closeStream(scope.row)">关闭流</el-button>
                            <el-button size="mini" type="text" @click="preview(scope.row)">预览</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </template>
    </layout>

    <el-dialog title="添加新流" :visible.sync="addStreamDialogVisible" width="50%" :close-on-click-modal="false"
               @closed="closeAddDialog">
        <el-form :model="addStreamForm" ref="addStreamForm" :rules="addStreamRules" label-width="110px"
                 v-loading="formLoading">
            <el-form-item label="流地址(url)" prop="url">
                <el-input v-model="addStreamForm.url" autocomplete="off" placeholder="rtsp、rtmp、mp4 等，参考zlmediakit"
                          clearable></el-input>
            </el-form-item>
            <el-form-item label="流ID(stream)" prop="stream">
                <el-input v-model="addStreamForm.stream" autocomplete="off" clearable>
                    <el-button slot="append" @click="createStreamId">生成随机ID</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="名称(app)" prop="app">
                <el-input v-model="addStreamForm.app" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="域名(vhost)">
                <el-input v-model="addStreamForm.vhost" autocomplete="off" clearable></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addStreamDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addStreamEvent" :disabled="formLoading">添 加</el-button>
        </span>
    </el-dialog>

    <player-dialog :visible.sync="playerDialogVisible" v-if="playerDialogVisible" ref="playerDialog" @refresh="loadStreamList"></player-dialog>

</div>
</body>
<script src="/static/layout.js"></script>
<script src="/static/menu.js"></script>
<script src="/static/jessibuca/index.js"></script>
<script src="/static/jessibuca/player.js"></script>
<script src="/static/request.js"></script>
<script src="/static/player-dailog.js"></script>
<script>

    new Vue({
        el: '#app',
        data: function () {
            return {
                tableLoading: false,
                formLoading: false,
                tableData: [],
                // videoURLData: [],
                currentVideo: {},
                currentAudio: {},
                addStreamDialogVisible: false,
                playerDialogVisible: false,
                addStreamForm: {
                    vhost: "__default__",
                    app: "live",
                    stream: "0",
                    url: "rtsp://admin:dyhb12345@220.180.188.245:8382/Streaming/Channels/102",
                },
                addStreamRules: {
                    url: [
                        {required: true, message: '请输入原始流地址', trigger: 'blur'},
                    ],
                        app: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                    ],
                        stream: [
                        {required: true, message: '请输入流ID', trigger: 'blur'},
                    ],
                }
            }
        },
        created: function () {
            this.$nextTick(() => {
                this.loadStreamList()
            });
        },
        methods: {

            showAddStream() {
                this.addStreamDialogVisible = true
            },

            closeAddDialog() {
                this.$refs["addStreamForm"].resetFields()
            },

            createStreamId() {
                this.addStreamForm.stream = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
            },

            addStreamEvent() {
                this.$refs["addStreamForm"].validate((valid) => {
                    if (valid) {
                        this.addStream()
                    } else {
                        return false;
                    }
                });
            },

            addStream() {
                // 添加流
                this.formLoading = true
                request.get(
                    '/zl/api/addStreamProxy?' + Qs.stringify(this.addStreamForm),
                ).then(res => {
                    if (res.data) {
                        let data = res.data;
                        if (data.code === 0) {
                            let that = this
                            //列表接口响应略慢，延时1s执行
                            setTimeout(() => {
                                that.loadStreamList()
                                this.formLoading = false
                                this.addStreamDialogVisible = false
                            }, 1000);
                        } else {
                            this.formLoading = false
                            this.$message.error(data.msg);
                        }
                    }
                    this.formLoading = false
                }).catch(onError);
            },

            //关闭流
            closeStream(row) {
                this.tableLoading = true
                var params = new URLSearchParams()
                params.append('app', row.app)
                params.append('stream', row.stream)
                request.post(
                    '/api/closeStream',
                    params
                ).then(res => {
                    this.tableLoading = false
                    if (res.data) {
                        let data = res.data;
                        if (data.code === 0) {
                            this.loadStreamList()
                        } else {
                            this.$message.error(data.msg);
                        }
                    }
                }).catch(onError);
            },

            //加载当前流列表
            loadStreamList() {
                this.tableLoading = true
                request.get('/api/getStreamList'
                    // ,{
                    //     headers: {'token': sessionStorage.getItem("token")}
                    // }
                ).then(res => {
                    this.tableLoading = false
                    if (res.data) {
                        let data = res.data;
                        if (data.code === 0) {
                            this.tableData = data.data
                        } else {
                            this.$message.error(data.msg);
                        }
                    }
                }).catch(onError);
            },

            //预览
            preview(data) {
                this.playerDialogVisible = true

                this.$nextTick(() => {
                    this.$refs["playerDialog"].load(data.stream)
                })
            },

            unix2Date(ud) {
                var dataStr = moment.unix(ud).format('YYYY-MM-DD HH:mm:ss')
                return dataStr
            },

            autoDuration(seconds) {
                let t = moment.duration(seconds, 'seconds')

                let r = t.asSeconds()

                if(r <= 60 ) {
                    return r + "秒"
                } else if(r > 60 && r <= 3600) {
                    return t.asMinutes().toFixed(1) + "分钟"
                } else if(r > 3600 && r <= 86400) {
                    return t.asHours().toFixed(1) + "小时"
                } else if(r > 86400 && r <= 2073600) {
                    return t.asDays().toFixed(1) + "天"
                } else if(r > 2073600 && r <= 14515200) {
                    return t.asWeeks().toFixed(1) + "周"
                } else {
                    return t.asMonths().toFixed(1) + "月"
                }
            }

        }
    })

</script>
</html>